<template>
  <div class="modelConfiguration">
    <DFPageList ref="dfPageListRef" :pageOptions="pageOptions">
      <template #deptDirectorCode="{ model }">
        <DFSelectSearch
          ref="machineSelectRef"
          style="width: 100%"
          :width="'100%'"
          :formValue="model['deptDirectorCode']"
          filterable
          :getRemoteList="listUser"
          label="nickName"
          value="userName"
          nodeLabel="userName"
          nodeValue="nickName"
          searchKey="entity.nickName"
          :placeholder="t('common.form.plSelect')"
          :remote="true"
          :isNeedValid="false"
          :remoteParams="remoteQueryParams"
          clearable
          @changeSelect="
            (e) => {
              updateMachine(e, model);
            }
          "
        />
      </template>
    </DFPageList>
  </div>
</template>
<script lang="ts" setup name="Dept">
  import { useMixins } from '@/hooks/useMixins';
  import lang from './lang';
  // import DFUploadImage from '@/components/UploadImage/single.vue';
  // import { listDept, delDept, addDept, updateDept, getDept } from '@/api/system/dept';
  import {
    listUser,
    // getUserOrgTree,
  } from '@/api/system/user';
  import DFSelectSearch from '@/components/DFSelectSearch/index.vue';
  // import { cloneDeep } from 'lodash-es';
  import { t } from '@/i18n';
  const {
    loadLangFn,
    // handleTree,
    // cloneDeep,
    getPageLangValueFn,
    message,
  } = useMixins();

  loadLangFn(lang);
  const dfPageListRef: any = ref(null);
  const deptOption: any = ref([]);
  // const defaultIndex = ref<number>(-1);
  // const treeSelect = (_: number, model: DeptTree) => {
  //   const data = { ...cloneDeep(dfPageListRef.value.getModalFormValFn()) };
  //   dfPageListRef.value.setFieldsValueFn({ ...data, deptParent: model.deptId });
  // };
  const expandedKeysList: any = ref([]);
  // const fileUrl = ref('');
  // const responseImg = () => {
  //   console.log(4445);
  // };
  // const modelOptionList: any = ref([]);

  const setExpandKeyListFn = (e, list) => {
    for (const item of e) {
      const { id = '', deptChildList = [] } = item;

      if (deptChildList && deptChildList.length) {
        setExpandKeyListFn(deptChildList, list);
      }

      list.push(id);
    }

    return list;
  };

  const setAfterRequestDataFn = (e) => {
    const expandKeyList: any = [];

    setExpandKeyListFn(e, expandKeyList);

    expandedKeysList.value = expandKeyList;

    return e;
  };
  //远程搜索参数doorFrameFilter
  const remoteQueryParams = ref({
    entity: {
      searchValue: '',
    },
    pageSize: 9999,
    pageNum: 1,
    searchValue: '',
  });
  const allModelDisabled = ref(false);

  const allModelHidden = ref(false);

  const getAllModelFn = async () => {
    try {
      // const res = await listDept({
      //   entity: {
      //     deptName: '',
      //   },
      //   pageNum: 1,
      //   pageSize: 10,
      // });
      // deptOption.value = res.row || [];
      // console.log(modelOptionList.value);

      // console.log(deptOption.value);
    } catch (e) {
      console.log(e);
    }
  };
  getAllModelFn();
  const updateMachine = (e, row) => {
    console.log('555', e, row);
    row['deptDirectorCode'] = e?.userName || '';
    row['directorTelephone'] = e?.phoneCode || '';
    row['directorEmail'] = e?.email || '';
    row['deptDirector'] = e?.nickName || '';
  };
  // const setDialogSubmitDataFn = async (data: any = {}) => {
  //   if (data && !data['deptParent']) {
  //     data['deptParent'] = 0;
  //   }

  //   return data;
  // };

  const beforeOpenDialogFn = async (data: any = {}, type = 'add') => {
    if (data && data.level >= 4) {
      message.destroyAll();

      message.error(getPageLangValueFn('dialog.addErrMsg'));

      return false;
    }

    allModelDisabled.value = !!data?.deptParent;

    allModelHidden.value = type === 'edit' && data.deptParent === 0;

    return true;
  };

  const setDialogDataFn = async (data: any = {}, type = 'edit') => {
    const { orderNum = null, deptSort = null } = data;

    if (![null, undefined].includes(orderNum)) {
      data['orderNum'] = orderNum.toString();
    }

    if (![null, undefined].includes(deptSort)) {
      data['deptSort'] = deptSort.toString();
    }

    if (type === 'add' && data.id) {
      const { id = '', level = 0 } = data;

      const newData = {};

      newData['deptParent'] = id;

      newData['level'] = level;

      return newData;
    }

    return data;
  };

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'deptName',
        },
      ],
    },
    table: {
      hasSelection: false,
      hasIndex: false,
      expandedKeysList,
      sorter: false,
      childrenKey: 'deptChildList',
      columns: [
        {
          label: 'deptName',
        },
        {
          label: 'deptSort',
        },
        {
          label: 'deptDirector',
        },
        {
          label: 'directorTelephone',
        },
        {
          label: 'directorEmail',
        },
      ],
      action: {
        columns: [
          {
            label: 'add',
          },
          {
            label: 'edit',
          },
          {
            label: 'delete',
            isArray: false,
            fn: getAllModelFn,
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      // requestFn: listDept,
      // delRequestFn: delDept,
      setAfterRequestDataFn,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'parentId',
          prop: 'deptParent',
          required: false,
          component: 'NTreeSelect',
          disabled: allModelDisabled,
          hidden: allModelHidden,
          requiredRulesType: 'number',
          componentProps: {
            'label-field': 'deptName',
            'key-field': 'id',
            'children-field': 'deptChildList',
            filterable: true,
            options: deptOption,
            'default-expand-all': true,
          },
        },
        {
          label: 'deptName',
          required: true,
          maxlength: 60,
        },
        {
          label: 'deptSort',
          maxlength: 100,
          required: true,
        },
        {
          label: 'deptDirectorCode',
          slot: 'deptDirectorCode',
          defaultValue: null,
        },
        {
          label: 'deptDirector',
          slot: 'deptDirector',
          hidden: true,
        },
        {
          label: 'directorTelephone',
          maxlength: 100,
          componentProps: {
            disabled: true,
          },
        },
        {
          label: 'directorEmail',
          maxlength: 100,
          componentProps: {
            disabled: true,
          },
        },
        {
          label: 'remark',
          common: true,
          maxlength: 100,
          type: 'textarea',
          giProps: { span: 4 },
          componentProps: {
            'show-count': true,
          },
        },
      ],
      // getDataFn: getDept,
      // addDataFn: addDept,
      // updateDataFn: updateDept,
      beforeOpenDialogFn,
      // setDialogSubmitDataFn,
      setDialogDataFn,
      afterDialogSubmitFn: getAllModelFn,
    },
  };
</script>
